﻿@model Guid
@section Styles{
    <style type="text/css">
        html, body {
            background: #ffffff;
        }
    </style>
}
@section Scripts{
<input type="hidden" value='@Html.Raw(ViewData["power"])' id="hidden_power" />
<input type="hidden" value='@Model' id="hidden_id" />
<input type="hidden" value='@ViewData["PId"]' id="hidden_pId" />
<script type="text/javascript">
 

    var power = JSON.parse(document.getElementById('hidden_power').value);
    var id = document.getElementById('hidden_id').value;
     var pId = document.getElementById('hidden_pId').value;
        var app = new Vue({
            el: "#app",
            data: function () {
                return {
                    power: power,
                    prefix: "/Admin/SalesSlipInfo_Items",
                    form: {
                        saveState: false,
                         pId: pId,
                        vm: {
                            Id: id,
                            Model: {}
                        }
                    },
                    restaurants: [] 
                }
            },
            created: function () {
                this.loadForm();
            },
            mounted: function () {
                
            },
            methods: {
                loadForm: function () {
                    var _this = this;
                    var path = _this.prefix + "/LoadForm/" + _this.form.vm.Id;

                    hzyAdmin.post(path, {}, function (r) {
                         
                        if (r.status != 1) return;
                        _this.form.vm = r.data;
                        _this.form.vm.Model.Master_Id = _this.form.pId;
                        _this.restaurants = r.data.ItemsList;
                    });
                },
                closeWindow: function (delay = 0) {
                    setTimeout(function () {
                        hzyAdmin.layer.close(hzyAdmin.layer.getFrameIndex(window.name));
                    }, delay);
                },
                save: function () {
                    var _this = this;
                    var path = _this.prefix + "/Save";

                    //验证
                    //if (!this.form.vm.Model.Function_Name) return hzyAdmin.alert('功能名称不能为空!','警告');

                    this.form.saveState = true;
                    hzyAdmin.post(path, this.form.vm.Model, function (r) {
                        _this.form.saveState = false;
                        if (r.status == 1) {
                            hzyAdmin.alert('保存成功', '成功');
                            //关闭当前窗口
                            _this.closeWindow();
                        }
                    });
                },
                //查找带回
                findBack_User: function (isRemove) {
                    if (isRemove) {
                        //清空信息
                        this.form.vm.Model.SalesSlipInfo_Items_ProdectId = '';
                        this.form.vm.Model.SalesSlipInfo_Items_ProdectName = '';
                        this.form.vm.Model.SalesSlipInfo_Items_ProdectColour = '';
                        this.form.vm.Model.SalesSlipInfo_Items_ProdectCode = '';
                        return;
                    }
                    //打开页面查找带回信息
                    var _this = this;
                    var path = "/Admin/Product/Index?findback=1";

                    hzyAdmin.openPage('请选择用户', path, function (row) {
                        console.log('查找带回 行数据', row);
                        if (row == null) return;
                        _this.form.vm.Model.SalesSlipInfo_Items_ProdectId = row._ukid;
                        _this.form.vm.Model.SalesSlipInfo_Items_ProdectName = row.Product_Name;
                        _this.form.vm.Model.SalesSlipInfo_Items_ProdectCode = row.Product_Code;
                        _this.form.vm.Model.SalesSlipInfo_Items_ProdectColour = row.Product_Colour
                    }, 1200, 1000);
                },
                //查询用过的字段
                querySearch (queryString, cb) {
                    var _this = this;
                    var restaurants = _this.restaurants;
                    debugger
                    var results = queryString ? restaurants.filter(_this.createFilter(queryString)) : restaurants;
                    // 调用 callback 返回建议列表的数据
                   
                    cb(results);
                },
                createFilter (queryString) {
                    return (restaurant) => {
                        return (restaurant.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0);
                    };
                },
               
                addressChange() {
                    var _this = this;
                   
                  
                    _this.form.vm.Model.SalesSlipInfo_Items_ProdecMoney = (_this.form.vm.Model.SalesSlipInfo_Items_ProdecUnitPrice * _this.form.vm.Model.SalesSlipInfo_Items_ProdectNumber * _this.form.vm.Model.SalesSlipInfo_Items_Width * _this.form.vm.Model.SalesSlipInfo_Items_Height).toFixed(2);
                    
                }
            }
        });
    </script>
}
<div class="m-20 hzyAdminForm" id="app">
    <div class="container-fluid">
        <div class="row">


            <!--请先设置 Models 和 DbSet 方可体验最完善的表单-->
            <div class="col-sm-6">
                <h4 class="example-title">产品名称</h4>
                <div class="input-group">
                    <input type="text" class="form-control" readonly="readonly" v-model="form.vm.Model.SalesSlipInfo_Items_ProdectName">
                    <div class="input-group-append">
                        <button type="button" class="btn btn-default btn-outline" @@click="findBack_User()">
                            <i class="fas fa-search"></i>
                        </button>
                        <button type="button" class="btn btn-default btn-outline" @@click="findBack_User(1)">
                            <i class="fas fa-trash-alt text-danger"></i>
                        </button>
                    </div>
                </div>
            </div>
            <div class="col-sm-6">
                <h4 class="example-title">产品编码</h4>
                <input type="text" class="form-control" placeholder="请输入 产品编码" v-model="form.vm.Model.SalesSlipInfo_Items_ProdectCode" autocomplete="off" />
            </div>
            <div class="col-sm-6">
                <h4 class="example-title">产品颜色</h4>
                <input type="text" class="form-control" placeholder="请输入 产品颜色" v-model="form.vm.Model.SalesSlipInfo_Items_ProdectColour" autocomplete="off" />
            </div>
            <!--请先设置 Models 和 DbSet 方可体验最完善的表单-->
            @*<div class="col-sm-6">
            <h4 class="example-title">产品颜色</h4>
            <input type="text" class="form-control" placeholder="请输入 产品颜色" v-model="form.vm.Model.SalesSlipInfo_Items_ProdectColour" autocomplete="off" />
        </div>*@
            <!--请先设置 Models 和 DbSet 方可体验最完善的表单-->
            <div class="col-sm-6">
                <h4 class="example-title">罩壳配置</h4>
                <el-autocomplete  style='width: 100%'  type="text"   
                          clearable 
                          placeholder="请输入 罩壳配置"
                          :fetch-suggestions="querySearch" 
                          v-model="form.vm.Model.SalesSlipInfo_Items_Enclosure"
                          autocomplete="off" ></el-autocomplete>
            </div>
            <div class="col-sm-6">
                <h4 class="example-title">单位</h4>
                <input type="text" class="form-control" placeholder="请输入 单位" v-model="form.vm.Model.SalesSlipInfo_Items_ProdectUnit"  autocomplete="off" />
            </div>
            <!--请先设置 Models 和 DbSet 方可体验最完善的表单-->
            <div class="col-sm-6">
                <h4 class="example-title">单价</h4>
                <input type="number" class="form-control" placeholder="请输入 单价" v-model="form.vm.Model.SalesSlipInfo_Items_ProdecUnitPrice" autocomplete="off" @@input='addressChange' />
            </div>
            <div class="col-sm-6">
                <h4 class="example-title">宽</h4>
                <input type="number" class="form-control" placeholder="请输入 宽" v-model="form.vm.Model.SalesSlipInfo_Items_Width" @@input='addressChange' autocomplete="off" />
            </div>
            <div class="col-sm-6">
                <h4 class="example-title">高</h4>
                <input type="number" class="form-control" placeholder="请输入 高" v-model="form.vm.Model.SalesSlipInfo_Items_Height" @@input='addressChange' autocomplete="off" />
            </div>
            <!--请先设置 Models 和 DbSet 方可体验最完善的表单-->
            <div class="col-sm-6">
                <h4 class="example-title">数量</h4>
                <input type="number" class="form-control" placeholder="请输入 数量" v-model="form.vm.Model.SalesSlipInfo_Items_ProdectNumber" @@input='addressChange' autocomplete="off" />
            </div>
            <!--请先设置 Models 和 DbSet 方可体验最完善的表单-->
            <div class="col-sm-6">
                <h4 class="example-title">金额</h4>
                <input type="number" class="form-control" placeholder="请输入 金额" v-model="form.vm.Model.SalesSlipInfo_Items_ProdecMoney" autocomplete="off" />
            </div>
        </div>
        <div class="hzyAdminForm-footer">
            <div class="row">
                <div class="col-sm-6"></div>
                <div class="col-sm-6 text-right">
                    <button class="btn btn-primary" @@click="save" v-bind:disabled="form.saveState" v-if="power.Save">保存</button>
                    <button class="btn btn-danger" @@click="closeWindow()">关闭</button>
                </div>
            </div>
        </div>
    </div>
</div>